<template>
  <div class="recommendPage">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
        <van-swipe-item v-for="(item, index) in swiperData" :key="index">
          <img :src="item.img" class="swipe-img" />
        </van-swipe-item>
        <van-swipe-item v-if="swiperData.length == 0">
          <img src="../../assets/images/pic/logo.png" class="swipe-img" />
        </van-swipe-item>
      </van-swipe>
  </div>
</template>

<script>
// 引入插件
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  components: {
  },
  data() {
    return {
      swiperData:[],
      maxNum:0,
      cardNo:0,
    };
  },
  methods:{
  loadCards() {
    var that = this
      if (!JSON.parse(localStorage.getItem("cards"))) {
        alert("未加载数据");
        that.$router.push({
          path: "excel",
        });
        return;
      }
      that.swiperData = JSON.parse(localStorage.getItem("cards"));
      for(var i = 0 ;i<that.swiperData.length;i++){
        that.swiperData[i].img = require("../../assets/images/pic/" + that.swiperData[i].img);
      }
      that.maxNum = JSON.parse(localStorage.getItem("cards")).length;
    },
  },
  computed: {
 
  },
  mounted() {
    this.loadCards()
  }
};
</script>
<style scoped lang="less">
/deep/ .van-swipe-item {
  text-align: center;
}
.my-swipe {
  margin-top: 10px;
  border: 2px solid #000;
}
.swipe-img {
  object-fit: cover;
  width: 100%;
  height: 172px;
}
</style>

